<template>
	<el-drawer size="640px" :title="`【${data.name}】编目详情`" :visible.sync="drawer">
		<div class="catalog_detail">
			<div class="info">
				<dl>
					<dt>创建者：</dt>
					<dd>{{ data.createName }}</dd>
				</dl>
				<dl>
					<dt>创建时间：</dt>
					<dd>{{ data.createTime }}</dd>
				</dl>
				<dl>
					<dt>更新时间：</dt>
					<dd>{{ data.updateTime }}</dd>
				</dl>
			</div>
			<el-tabs v-model="checkedValue">
				<el-tab-pane v-for="(item, index) in catalogData" :key="index" :label="item.name" :name="item.id"></el-tab-pane>
			</el-tabs>
			<div class="list">
				<div class="item" v-for="(item, index) in rulesListData" :key="index">
					<dl class="one">
						<dt>{{ item.title }}</dt>
						<dd></dd>
					</dl>
					<dl class="two">
						<dt></dt>
						<dd></dd>
					</dl>
				</div>
			</div>
		</div>
	</el-drawer>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	props: {
		value: Boolean,
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			drawer: this.value,
			checkedValue: '',
			catalogData: []
		};
	},
	computed: {
		...mapGetters(['dictEnums']),
		rulesListData() {
			let info = this.catalogData.find((item) => item.id === this.checkedValue);
			return !info ? [] : info.attribute;
		}
	},
	watch: {
		value(flag) {
			this.drawer = flag;
		},
		drawer(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.catalogData = JSON.parse(this.data.catalogData);
			this.checkedValue = this.catalogData.length === 0 ? '' : this.catalogData[0].id;
		}
	},
	mounted() {}
};
</script>

<style lang="scss" scoped>
.catalog_detail::v-deep {
	.info {
		display: flex;
		align-items: center;
		padding: 16px;
		border-bottom: solid 1px #ebeef5;
		dl {
			font-size: 14px;
			line-height: 1;
			margin-left: 48px;
			&:first-child {
				margin-left: 0;
			}
		}
		dt {
			color: #909399;
			margin-bottom: 10px;
		}
		dd {
			color: #303133;
		}
	}
	.el-tabs__header {
		margin: 0;
	}
	.el-tabs__nav-wrap {
		padding: 0 16px;
	}
	.list {
		padding: 0 16px;
	}
	.item {
		margin-top: 16px;
		border: solid 1px #ebeef5;
	}
}
</style>
